<template>
    <div :id="list?.id" :class="['section'+ (list.level ? list.level : 1)]">{{ list?.text }}</div>
</template>
  
<script lang="ts" setup>
    // ！！！注意本组件只允许放在需要监听滚动页面的最底部，因为我们是通过父元素的节点获得内部所有子元素的高度所以必须要放在父元素中的最底部
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'

    // const props = withDefaults(defineProps<{
    //     list?: any[], 
    // }>(), {
    //     list: () => [],
    // })
    const { list = {} } = defineProps<{
        list?: any, 
    }>()

</script>

<style lang="scss" scoped>
    .section1::before {
        content: '';
        border-left: 5px rgb(64, 158, 255) solid;
        border-radius: 5px;
        margin-right: 5px;
    }
    .section1 {
        box-sizing: border-box;
        margin: 20px 0;
        font-size: 18px;
        border-bottom: 1px solid rgb(220, 223, 230);
        background: linear-gradient(45deg, rgb(232, 242, 255), transparent);
        padding: 5px 0;
    }

    .section2::before {
        content: '';
        border-left: 5px rgb(81, 168, 255) solid;
        border-radius: 5px;
        margin-right: 5px;
    }
    .section2 {
        box-sizing: border-box;
        margin: 20px 0;
        font-size: 16px;
        // border-bottom: 1px solid rgb(220, 223, 230);
        // background: linear-gradient(45deg, rgb(232, 242, 255), transparent);
        padding: 5px 0;
    }

    .section3::before {
        content: '';
        border-left: 5px rgb(129, 191, 253) solid;
        border-radius: 5px;
        margin-right: 5px;
    }
    .section3 {
        box-sizing: border-box;
        margin: 20px 0;
        font-size: 16px;
        // border-bottom: 1px solid rgb(220, 223, 230);
        // background: linear-gradient(45deg, rgb(232, 242, 255), transparent);
        padding: 5px 0;
    }
</style>